<template>
  <view class="container screen-width">
    <u-cell-group class="u-m-t-20">
      <u-cell-item title="头像" @tap="changeProfile">
        <van-uploader
						class="mt-3"
						:max-size="32 * 1024"
						:before-read="beforeRead"
						@oversize="onOversize"
					>
						<image style="width:40px;height:40px;border-radius:50%" :src="info.avatar.indexOf('http')> -1 ? info.avatar : $imgUrl + info.avatar"></image>
					</van-uploader>
      </u-cell-item>
      <u-cell-item
        title="昵称"
        :value="info.nickName"
        @tap="toRoute('nickName', info.nickName)"
      ></u-cell-item>
      <u-cell-item title="性别" :value="sex" @tap="showChange"></u-cell-item>
      <u-cell-item
        title="身份"
        :value="identity"
        @tap="showIdentity"
      ></u-cell-item>
    </u-cell-group>
    <u-cell-group class="u-m-t-20">
      <u-cell-item
        title="手机号码"
        @click="toRoute('tel', info.phoneNumber)"
        :value="info.phoneNumber"
      ></u-cell-item>
      <u-cell-item
        title="微信"
        v-if="info.wechatOpenId"
        value="已绑定"
      ></u-cell-item>
      <u-cell-item
        title="邮箱"
        @click="toRoute('email', info.email)"
        :value="info.email"
      ></u-cell-item>
      <u-cell-item title="密码" @click="toRoute('pwd')">
        <u-input
          @click="toUpdatePwd('pwd')"
          type="password"
          :value="
            info.password && info.password.length >= 8
              ? info.password.substring(0, 8)
              : info.password
          "
          :password-icon="false"
          :disabled="true"
        ></u-input>
      </u-cell-item>
    </u-cell-group>
    <!-- 修改性别 -->
    <van-action-sheet
      :closeOnClickOverlay="false"
      v-model="showChangeSex"
      :actions="actions"
      @select="onSelect"
      closeIcon="cross"
      cancelText="取消"
    />
    <!-- 修改身份 -->
    <van-action-sheet
      :closeOnClickOverlay="false"
      v-model="showChangeIdentity"
      :actions="option"
      @select="selectItem"
      closeIcon="cross"
      cancelText="取消"
    />

    <upload ref="upload" :show-cropper="showCropper" :imageFileName="imageFileName" @closeCropper="closeCropper"></upload>
    <Festival></Festival>
  </view>
</template>

<script>
import { userInfo } from "../../util/api/user";
import uInput from "../../uview-ui/components/u-input/u-input.vue";
import upload from "../../components/Upload.vue"
export default {
  components: {
		upload
	},
  data() {
    return {
      showCropper: false, // 截图弹窗遮罩默认隐藏
			imageAccept: "/jpg,/png,/jpeg",
			imageFileName: '',

      info: {}, // 用户信息
      showChangeSex: false, // 修改性别
      showChangeIdentity: false, // 修改身份
      actions: [
        { value: "0", name: "保密" },
        { value: "1", name: "男" },
        { value: "2", name: "女" },
      ],
      option: [
        { value: "1", name: "企业主" },
        { value: "2", name: "服务机构" },
        { value: "3", name: "其他" },
      ],
      obj: {
        name: {
          childName: {
            childName1: {},
          },
          childName3: {
            childName2: {},
          },
        },
        arr: [],
      },
    };
  },
  computed: {
    sex() {
      switch (this.info.sex) {
        case 0:
          return "保密";
        case 1:
          return "男";
        case 2:
          return "女";
      }
    },
    identity() {
      switch (this.info.identityType) {
        case 1:
          return "企业主";
        case 2:
          return "服务机构";
        case 3:
          return "其他";
      }
    },
  },
  onShow() {
    this.getUserInfo();
  },
  methods: {
    // 获取文件后缀
		getFileSuffix(fileName) {
			console.log('文件名',fileName)
		    return fileName.match(/\/\w+$/)[0].toLowerCase();
		},
		// 选择图片上传前操作，调起剪裁组件
		beforeRead(file) {
		    if (!this.imageAccept.includes(this.getFileSuffix(file.type))) {
		        return this.$notify('请上传 jpg/png 格式图片');
		    }
		    this.showCropper = true;
		    this.imageFileName = file.name;
		    uni.showLoading({ 
			    title: '加载中'
		    })
		    // 本地图片转成base64，用于截图框显示本地图片
			// this.imageToBase64(file);
			this.$refs.upload.imageToBase64(file)
		},
		// 上传文件过大
		onOversize() {
		    this.$notify('图片不能大于32k');
		},

		closeCropper(img) {
			this.showCropper = false
      this.info.avatar = img
      if(img !== ''){
        this.changePhoto(img)
      }
		},
    // 修改性别
    showChange() {
      // this.test();
      // return;
      this.showChangeSex = true;
    },
    //
    onSelect(item) {
      this.showChangeSex = false;

      this.$post("/bmj-api/api/ums/umsUsers/updateSex?sex=" + item.value).then(
        (res) => {
          // console.log(res);
          if (res.code == 200) {
            uni.showToast({
              title: "修改成功",
              duration: 2000,
              icon: "none",
            });
            this.getUserInfo();
          } else {
            uni.showToast({
              title: "修改失败",
              duration: 2000,
              icon: "none",
            });
          }
        }
      );
    },
    // 是否显示修改身份
    showIdentity() {
      this.showChangeIdentity = true;
    },
    selectItem(item) {
      this.showChangeIdentity = false;
      this.$post(
        "/bmj-api/api/ums/umsUsers/updateIdentity?identity=" + item.value
      ).then((res) => {
        // console.log(res);
        if (res.code == 200) {
          uni.showToast({
            title: "修改成功",
            icon: "none",
            duration: 2000,
          });
          this.getUserInfo();
        }
      });
      // console.log(item.value);
    },
    // 获取信息
    getUserInfo() {
      userInfo().then((res) => {
        // uni.hideLoading();
        this.info = res.result;
      });
    },
    toRoute(url, v) {
      uni.navigateTo({
        url: url + "?value=" + v,
      });
    },
    toUpdatePwd() {
      uni.navigateTo({
        url: `./pwd?needpwd=${this.info.whetherNeedOldCipherCode}`,
      });
    },
    // 修改头像
    changePhoto(img) {
      this.$post("/bmj-api/api/ums/umsUsers/updateHeadPortrait?newHeadPortrait=" + img).then((res)=>{
        if (res.code === 200) {
          uni.showToast({
            title: "修改成功",
            duration: 2000,
            icon: "none"
          })
          this.getUserInfo(); // 重新调用获取用户信息
        } else {
          uni.showToast({
            title: "上传失败",
            duration: 2000,
            icon: "none"
          })
        }
      })
    }
  },
};
</script>
<style lang="less" scoped>
/deep/ input {
  text-align: right;
}
</style>
